<template>
  <div class="center">
    <!--头部用户-->
    <div class="header">
      <div class="left">
        <router-link to="/login">
          <img
            :src="userInfo.avatar !== '' ? userInfo.avatar : 'https://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png'"
          />
        </router-link>
        <div class="info" v-if="!userInfo.name">
          <!-- <p>{{ nickName?nickName: '未登录' }}</p> -->
          <p>未登录</p>
          <span>普通用户</span>
        </div>
        <div class="info" v-else>
          <!-- <p>{{ nickName?nickName: '未登录' }}</p> -->
          <p>已登录</p>
          <span>{{ userInfo.userInfo.name }}</span>
        </div>
      </div>
      <div class="right">
        <img src="@/static/二维码.jpg" />
      </div>
    </div>
    <h1 class="tt">我的资产</h1>
    <!--资产-->
    <div class="assetList">
      <div class="assetItem">
        <p>￥0</p>
        <span>余额</span>
      </div>
      <div class="assetItem">
        <p>0</p>
        <span>红包</span>
      </div>

      <div class="assetItem">
        <p>0</p>
        <span>优惠券</span>
      </div>

      <div class="assetItem">
        <p>0</p>
        <span>积分</span>
      </div>

      <div class="assetItem">
        <p>0</p>
        <span>礼品卡</span>
      </div>
    </div>
    <!--功能区-->
    <van-grid :column-num="3">
      <van-grid-item icon="orders-o" text="我的订单" class="right bottom" />
      <van-grid-item icon="user-circle-o" text="账号管理" class="right bottom" />
      <van-grid-item icon="phone-o" text="我的手机号" class="bottom" />
      <van-grid-item icon="calendar-o" text="周六一起拼" class="right bottom" />
      <van-grid-item icon="refund-o" text="售后服务" class="right bottom" />
      <van-grid-item icon="cash-on-deliver" text="邀请返利" class="bottom" />
      <van-grid-item icon="goods-collect-o" text="优先购" class="right bottom" />
      <van-grid-item icon="gold-coin-o" text="积分中心" class="right bottom" />
      <van-grid-item icon="diamond-o" text="会员俱乐部" class="bottom" />
      <van-grid-item icon="location-o" text="地址管理" class="right bottom" />
      <van-grid-item icon="shield-o" text="支付安全" class="right bottom" />
      <van-grid-item icon="service-o" text="帮助与客服" class="bottom" />
      <van-grid-item icon="records" text="意见反馈" class="right" />
      <van-grid-item icon="star-o" text="我的竞拍" class="right" />
    </van-grid>
    <van-button type="default" size="large" @click="gohome" class="exit">退出登录</van-button>
    <tabBar></tabBar>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 导入user仓库
import { useUserInfo } from '@/stores/userInfo'
// 导入清除token
import { removeToken } from '@/utils/storage'
// import { default as UserInfoStore } from '../../store/userInfo'
import { useRouter } from 'vue-router'
const userInfo = useUserInfo()
// const nickName = ref(userInfo.nickName)
// 路由实例
const $router = useRouter()
const gohome = () => {
  // 清除token
  removeToken()
  $router.push({ path: '/home' })
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
/*
  头部样式
*/
.header {
  width: 100%;
  height: 135px;
  background: url(https://yanxuan.nosdn.127.net/5905098f74e04c39fa5e76ebb9ff591b.png);
  display: flex;
}
.header .left {
  width: 240.4987px;
  height: 100%;
  display: flex;
  align-items: center;
}

.header .left img {
  height: 70.9988px;
  width: 70.9988px;
  border-radius: 50%;
}
.header .left .info {
  padding: 0 4.9988px;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header .right {
  height: 100%;
  padding: 0 10.0012px;
}
.header .right img {
  border-radius: 20px;
  height: 100%;
  width: 119.5012px;
}

/*
  资产样式
*/
.center .tt {
  margin-left: 11.25px;
  border-bottom: 0.375px solid #d9d9d9;
  text-align: left;
  line-height: 39px;
  font-size: 10.5px;
}
.assetList {
  display: flex;
  height: 2.1333rem;
}
.assetList .assetItem {
  padding: 0.2667rem;
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.4267rem;
}
.right {
  border-right: 0.0267rem solid #ccc;
}
.bottom {
  border-bottom: 0.0267rem solid #ccc;
}
.exit {
  margin-bottom: 1.3333rem;
}
</style>
